<template>
  <div>
    <p>vue3生命周期钩子</p>
    <button @click="change">{{ count }}</button>
  </div>
</template>

<script setup>
import {
  ref,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUpdated,
  onBeforeMount,
  onUnmounted
} from 'vue'

const count = ref(100)
const change = () => {
  count.value++
}

onBeforeMount(() => {
  console.log('onBeforemount')
})
onMounted(() => {
  console.log('onMounted')
})
onBeforeUpdate(() => {
  console.log('onBeforeUpdate')
})
onUpdated(() => {
  console.log('onUpdated')
})
onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
})
onUnmounted(() => {
  console.log('onUnmounted')
})
</script>
